<template>
  <div :class="classes" :style="styles">
    <slot></slot>
  </div>
</template>
<script setup>
import { provide, getCurrentInstance, computed } from 'vue'
import { oneOf } from '../../utils/assist'

const prefixCls = 'haloe-row'


const props = defineProps({
  // todo 4.5.0 已无效，强制 flex
  type: {
    validator(value) {
      return oneOf(value, ['flex'])
    },
  },
  align: {
    validator(value) {
      return oneOf(value, ['top', 'middle', 'bottom'])
    },
  },
  justify: {
    validator(value) {
      return oneOf(value, [
        'start',
        'end',
        'center',
        'space-around',
        'space-between',
      ])
    },
  },
  gutter: {
    type: Number,
    default: 0,
  },
  className: String,
  // 4.5.0
  wrap: {
    type: Boolean,
    default: true,
  },
})

const classes = computed(() => {
  return [
    // todo 4.5.0 已无效，强制 flex
    `${prefixCls}`,
    {
      [`${prefixCls}-${props.type}`]: !!props.type,
      [`${prefixCls}-${props.type}-${props.align}`]: !!props.align && props.type,
      [`${prefixCls}-${props.type}-${props.justify}`]:
        !!props.justify && props.type,
      [`${prefixCls}-${props.align}`]: !!props.align,
      [`${prefixCls}-${props.justify}`]: !!props.justify,
      [`${props.className}`]: !!props.className,
      [`${prefixCls}-no-wrap`]: !props.wrap,
    },
  ]
})

const styles=computed(()=>{
  let style={}
  if(props.gutter!==0){
    style={
      marginLeft:props.gutter/-2+'px',
      marginRight:props.gutter/-2+'px'
    }
  }
  return style
})

// provide('RowInstance', getCurrentInstance())
provide('RowInstance', {gutter:props.gutter})

</script>
